{% extends "base/base.html" %}

{% block title %}新手指南 - 妙趣拾光锦盒{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card border-0 shadow-sm mb-5">
                <div class="card-body p-5">
                    <h1 class="text-center mb-5">新手指南</h1>
                    
                    <div class="mb-5">
                        <h3 class="mb-4"><i class="fas fa-box-open text-primary me-2"></i>什么是超市盲盒？</h3>
                        <p>超市盲盒是由妙趣拾光锦盒平台与合作超市共同推出的惊喜商品组合。每个盲盒都包含多件超市商品，但具体内容在开盒前是保密的，为您带来拆盒的惊喜体验。</p>
                        <p>我们的盲盒商品主要来源于：</p>
                        <ul>
                            <li>临近保质期但仍然新鲜安全的商品</li>
                            <li>季节性促销或清仓的商品</li>
                            <li>超市特别精选的优质商品</li>
                        </ul>
                        <p>每个盲盒的商品总价值通常会高于您支付的金额，让您在获得惊喜的同时也能享受到超值购物体验。</p>
                    </div>
                    
                    <div class="mb-5">
                        <h3 class="mb-4"><i class="fas fa-shopping-bag text-primary me-2"></i>如何购买盲盒？</h3>
                        <div class="guide-steps">
                            <div class="guide-step">
                                <div class="step-number">1</div>
                                <div class="step-content">
                                    <h5>浏览选择</h5>
                                    <p>在首页或盲盒商城页面浏览各种不同类型的盲盒，根据您的喜好和需求选择合适的盲盒。每个盲盒都标注了类别、价格和可能包含的商品种类。</p>
                                </div>
                            </div>
                            
                            <div class="guide-step">
                                <div class="step-number">2</div>
                                <div class="step-content">
                                    <h5>下单支付</h5>
                                    <p>选择喜欢的盲盒后，点击"立即购买"或"加入购物车"按钮，然后按照提示完成支付流程。我们支持多种支付方式，包括微信支付、支付宝等。</p>
                                </div>
                            </div>
                            
                            <div class="guide-step">
                                <div class="step-number">3</div>
                                <div class="step-content">
                                    <h5>收货方式</h5>
                                    <p>您可以选择到合作超市自提或由我们配送到您指定的地址。自提可以免除配送费用，而配送服务则提供更便捷的体验。</p>
                                </div>
                            </div>
                            
                            <div class="guide-step">
                                <div class="step-number">4</div>
                                <div class="step-content">
                                    <h5>开启惊喜</h5>
                                    <p>收到盲盒后，享受拆盒的惊喜时刻！您可以在平台上分享您的开盒体验，获得积分奖励。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <h3 class="mb-4"><i class="fas fa-question-circle text-primary me-2"></i>常见问题</h3>
                        <div class="accordion" id="faqAccordion">
                            <div class="accordion-item border-0 mb-3 shadow-sm">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                        盲盒中的商品是否安全可靠？
                                    </button>
                                </h2>
                                <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        所有盲盒商品均经过严格筛选，确保质量安全。临近保质期的商品我们会明确标注，且保证在保质期内安全食用。我们承诺所有商品均来自正规渠道，品质有保障。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item border-0 mb-3 shadow-sm">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                        如果收到的商品不满意，可以退换吗？
                                    </button>
                                </h2>
                                <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        由于盲盒的特殊性质，一般情况下不支持因个人喜好原因退换。但如果您收到的商品存在质量问题（如破损、过期等），请在收到商品24小时内联系客服，我们将为您处理退换事宜。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item border-0 mb-3 shadow-sm">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                        积分如何获取和使用？
                                    </button>
                                </h2>
                                <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        您可以通过购买盲盒、分享开盒体验、参与活动等方式获取积分。积分可以在积分商城兑换各种实物礼品或优惠券。详细规则请查看"积分规则"页面。
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item border-0 shadow-sm">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                        配送范围和时间如何？
                                    </button>
                                </h2>
                                <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        我们在全球范围内提供配送服务，下单后1-3天内送达。交通不方便的地区3-5天内送达，具体配送时间会在下单时显示。您也可以选择到合作超市自提。
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-5">
                        <p>如果您还有其他问题，欢迎联系我们的客服：</p>
                        <div class="d-flex justify-content-center gap-3">
                            <a href="tel:4008888888" class="btn btn-outline-primary">
                                <i class="fas fa-phone me-2"></i>400-888-8888
                            </a>
                            <a href="mailto:service@miaoqushiguang.cn" class="btn btn-outline-primary">
                                <i class="fas fa-envelope me-2"></i>发送邮件
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center">
                <a href="{% url 'blindbox:list' %}" class="btn btn-primary">
                    <i class="fas fa-box-open me-2"></i>前往购买盲盒
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .guide-steps {
        position: relative;
    }
    
    .guide-steps:before {
        content: '';
        position: absolute;
        left: 19px;
        top: 0;
        height: 100%;
        width: 2px;
        background-color: #dee2e6;
        z-index: 1;
    }
    
    .guide-step {
        display: flex;
        margin-bottom: 30px;
        position: relative;
        z-index: 2;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--bs-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 15px;
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    
    .step-content {
        padding-top: 5px;
    }
    
    .accordion-button:not(.collapsed) {
        background-color: rgba(var(--bs-primary-rgb), 0.1);
        color: var(--bs-primary);
    }
    
    .accordion-button:focus {
        box-shadow: none;
        border-color: rgba(var(--bs-primary-rgb), 0.25);
    }
</style>
{% endblock %} 